<script setup lang="ts">
import { computed, PropType } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import type { ITableOptions } from './type';

const emits = defineEmits(['handlePageChange', 'handlePageSize']);
const props = defineProps({
	// 是否开启序号
	serialNumber: {
		type: Boolean as PropType<boolean>,
		default: () => true,
	},
	// 是否开启多选
	selection: {
		type: Boolean as PropType<boolean>,
		default: () => false,
	},
	// 表格的配置
	options: {
		type: Array as PropType<ITableOptions[]>,
		required: true,
	},
	// 表格数据
	value: {
		type: Array as PropType<any[]>,
		required: true,
	},
	// loading
	loading: {
		type: Boolean as PropType<boolean>,
		default: () => false,
	},
	// 是否开启分页
	pagination: {
		type: Boolean as PropType<boolean>,
		default: () => false,
	},
	// 数据总条数
	total: {
		type: Number as PropType<number>,
		required: true,
		default: () => 0,
	},
	// 当前是第几页
	currentPage: {
		type: Number as PropType<number>,
		default: () => 1,
	},
	// 当前页多少数据
	pageSize: {
		type: Number as PropType<number>,
		default: () => 20,
	},
	// 显示分页数据多少条的选项
	pageSizes: {
		type: Array as PropType<number[]>,
		default: () => [10, 20, 30, 50],
	},
	// 分页布局
	pageLayout: {
		type: String as PropType<string>,
		default: () => 'total, sizes, prev, pager, next, jumper',
	},
});

// 过滤操作项之后的配置
const tableOption = computed(() => props.options.filter(item => !item.action));
// 操作项
const actionOption = computed(() => props.options.find(item => item.action));

// 分页改变
const handlePageChange = (num: number) => {
	emits('handlePageChange', num);
};
// 显示条数改变
const handlePageSize = (num: number) => {
	emits('handlePageSize', num);
};
</script>

<template>
	<div v-part-loading="loading" class="app-table">
		<!-- 表格 -->
		<el-table :data="value" v-bind="$attrs">
			<!-- 多选 -->
			<template v-if="selection">
				<el-table-column type="selection" width="55" />
			</template>
			<!-- 序号 -->
			<template v-if="serialNumber">
				<el-table-column type="index" width="60" align="center" label="序号" />
			</template>
			<!-- 展示 -->
			<template v-for="(item, index) in tableOption" :key="index">
				<el-table-column v-if="item.prop" :label="item.label" :prop="item.prop" :align="item.align" :width="item.width">
					<template #default="scope">
						<!-- 自定义列 -->
						<slot v-if="item.slot" :name="item.slot" :scope="scope"></slot>
						<!-- 默认 -->
						<span v-else>{{ scope.row[item.prop] }}</span>
					</template>
				</el-table-column>
			</template>
			<!-- 操作 -->
			<el-table-column :label="actionOption?.label" :align="actionOption?.align" :width="actionOption?.width">
				<template #default="scope">
					<slot name="action" :scope="scope"></slot>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div v-if="pagination" class="pagination">
			<el-config-provider :locale="zhCn">
				<el-pagination
					:layout="pageLayout"
					:current-page="currentPage"
					:total="total"
					:default-page-size="pageSize"
					:page-sizes="pageSizes"
					@update:current-page="handlePageChange"
					@update:page-size="handlePageSize"
				></el-pagination>
			</el-config-provider>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
